<template>
  <div class="content">
    <h1>provideA.vue（父亲级别）</h1>
    <div class="box"></div>

    <hr/>

    <provideBVue></provideBVue>
  </div>
</template>

<script setup lang='ts'>
import { ref, inject } from 'vue'
import type { Ref } from 'vue'
import provideBVue from "./provideB.vue"

const color = inject<Ref<string>>('color')

</script>
<style lang="less">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #ddd;
  background-color: v-bind(color);
}
</style>